<template>
    
    <div id="TodoArticle">
        <div id="searchDIV">
            <input type="text" id="searchTxt"  @keyup.enter="setData" placeholder="搜索">
            <i id="sousuo" class="iconfont icon-sousuo"></i>
        </div>
        <ul id="searchUL"  v-for="(item,index) of plans" :key="index" >
            <p id="searchNoTask">没有相关任务！</p>
            <li v-if="searchData.indexOf(item.time)!=-1">
                <span class="iconfont icon-round"  @click="searchClick(index)" v-if="item.state==false"></span>
                <span class="iconfont icon-round_check"  @click="searchClick(index)" v-else></span>
                {{item.content}}
                <i class="iconfont icon-kongxinwujiaoxing" @click="searchImportantClick(index)" v-if="item.important==false"></i>
                <i class="iconfont icon-shixinwujiaoxing" @click="searchImportantClick(index)" v-else></i>
                <i>|</i>
                <i class="iconfont icon-shanchu" @click="searchDeleteClick(index)"></i>         
            </li>
        </ul>
        <div id="TodoArticleData">
            <p id="noAfoot">未添加待办事项！</p>
            <ul id="mainUL"  v-for="(item,index) of plans" :key="index">
                <li v-if="ok.includes(item.time)" hidden></li>
                <li v-else-if="important.includes(item.time)">
                    <span class="iconfont icon-round"  @click="okClick(index)"></span>
                    {{item.content}}
                    <i class="iconfont icon-shixinwujiaoxing" @click="importantClick(index)"></i>
                    <i>|</i>
                    <i class="iconfont icon-shanchu" @click="deleteClick(index)"></i>             
                </li>
            </ul>
            <ul id="mainUL2"  v-for="(item,index) of plans" :key="index">
                <li v-if="ok.includes(item.time) || important.includes(item.time)" hidden></li>
                <li v-else>
                    <span class="iconfont icon-round"  @click="okClick(index)"></span>
                    {{item.content}}
                    <i class="iconfont icon-kongxinwujiaoxing" @click="importantClick(index)"></i>
                    <i>|</i>
                    <i class="iconfont icon-shanchu" @click="deleteClick(index)"></i>         
                </li>
            </ul>
            <p id="completedP">已完成</p>
            <p id="noEnd">尚未完成任何任务</p>
            <ul id="completedUL"  v-for="(item,index) of plans" :key="index">
                <li  v-if="ok.includes(item.time)">
                    <span class="iconfont icon-round_check"  @click="okClick(index)"></span>
                    {{item.content}}
                    <i class="iconfont icon-shanchu" @click="deleteClick(index)"></i>
                </li>
            </ul>
        </div>
        
    </div>
</template>

<script setup>
    import { ref,onMounted,watchEffect,defineEmits  } from 'vue'
    const ok = ref([])
    const important =ref([])
	const notesOk= ref(0)
    const round= ref('iconfont icon-round')
    const roundCheck = ref('iconfont icon-round_check')
    const searchData = ref([])
    const plansData = ref([])
    const j = ref(0)
    const k = ref(0)
    const emit = defineEmits(['searchNumber'])
    const props = defineProps({
		plans: Array,
	})

    onMounted(() => {
		let h = 0
		let e = 0
		for (let i = 0; i < props.plans.length; i++) {
            if (props.plans[i].state) {
                h++
                ok.value.push(props.plans[i].time)
            } else {
                e++
            }
            if(props.plans[i].important){
                important.value.push(props.plans[i].time)
            }
		}
		if (h == 0) {
			document.querySelector('#noEnd').style.display = 'block'
            
		}
		if (e == 0) {
			document.querySelector('#noAfoot').style.display = 'block'
		}
		notesOk.value = h
	});

    function setData(){
        let value = document.querySelector('#searchTxt').value;
        if(value==''){
            location.reload()
        }
        searchData.value=[]
        document.querySelector('#TodoArticleData').style.display = 'none'
        j.value = 0
        k.value = 0
        for(let i=0;i<props.plans.length;i++){
            if(props.plans[i].content.indexOf(value)!=-1){
                searchData.value.push(props.plans[i].time)
                if(props.plans[i].state){
                    k.value++
                }
                j.value++
            }
        }
        let aaa = document.querySelector('#searchNoTask')
        if(searchData.value.length==0){
            aaa.style.display = 'block'
        }
        else{
            aaa.style.display = 'none'
            document.querySelector('#searchUL').style.display = 'block'
        }
        emit('searchNumber',j.value,k.value)
    }

    function setOkData(){
        let e = searchData.value
        searchData.value=[]
        searchData.value = e
        document.querySelector('#TodoArticleData').style.display = 'none'
        if(searchData.value.length!=0){
            document.querySelector('#searchUL').style.display = 'block'
        }
        k.value = 0
        j.value = 0
        for(let i=0;i<props.plans.length;i++){
            if(searchData.value.indexOf(props.plans[i].time)!=-1){
                if(props.plans[i].state){
                    k.value++
                }
                j.value++
            }
        }
        emit('searchNumber',j.value,k.value)
    }

    function deleteClick (index) {
		props.plans.splice(index, 1);
		save();
	}
    function searchDeleteClick(index){
        searchData.value = searchData.value.filter(function(item) {
            return item !== props.plans[index].time
        });
        props.plans.splice(index, 1);
        localStorage.setItem("plans", JSON.stringify(props.plans));
        setOkData()
    }
    function okClick(index) {
		props.plans[index].state = !props.plans[index].state;
		save()
	}
    function searchClick(index) {
		props.plans[index].state = !props.plans[index].state;
		localStorage.setItem("plans", JSON.stringify(props.plans));
        setOkData()
	}
    
    function importantClick(index) {
		props.plans[index].important = !props.plans[index].important;
		save()
	}
    function searchImportantClick(index) {
		props.plans[index].important = !props.plans[index].important;
		localStorage.setItem("plans", JSON.stringify(props.plans));
        setOkData()
	}
    function save(){
        localStorage.setItem("plans", JSON.stringify(props.plans));
        location.reload()
    }
</script>

<style scoped>
    #searchNoTask{
        display: none;
    }
    #searchDIV{
        position: relative;
        top: 0px;
        left: 60%;
    }
    #searchTxt{
        width: 200px;
        height: 20px;
        border-radius: 5px 5px 0 0;
        border: 2px solid #e7e7e7;
        border-bottom: 3px solid #868686;
    }
    #sousuo{
        position: absolute;
        top: 5px;
        color: #acacac;
        left: 180px;
        font-size: 16px;
    }
    #noAfoot,#noEnd,#searchNoTask {
		color: #ffffffa4;
		margin-left: 40%;
		display: none;
	}

    #TodoArticle{
        width: 84%;
        height: 75%;
        margin-left: 8%;
        margin-top: 10px;
        white-space:nowrap;
        overflow:auto;
    }
    #TodoArticle::-webkit-scrollbar {
        display: none;
    }
    #mainUL,#mainUL2,#completedUL,#searchUL{
        padding: 0;
        width: 100%;
    }
    #mainUL li,#mainUL2 li,#completedUL li,#searchUL li{
        margin-top: 5px;
        padding-left: 20px;
        list-style: none;
        width: 97%;
        height: 60px;
        line-height: 60px;
        background-color: rgba(255, 255, 255, 0.3);
        border-radius: 10px;
    }
    #TodoArticle span{
        margin-right: 10px;
    }
    #TodoArticle i{
        float: right;
        margin-right: 10px;
    }
    #completedP{
        color: white;
    }
</style>